<template>
  <div class="container">
    <Todoinput @add="addTodo"></Todoinput>
    <Todolist
      :data="newData"
      @del="delTodo"
      @getFlag="handleGetFlag"
      :allCount="allCount"
      :completedCount="completedCount"
      :activeCount="activeCount"
    ></Todolist>
  </div>
</template>
<script setup>
import Todoinput from "./todoinput.vue";
import Todolist from "./todolist.vue";
import { ref, computed } from "vue";
//功能
//1、列表展示 2、增加功能3、删除功能4、选中和未选中5、展示数量6、永久存储

let data = ref([
  // {
  //   id: 1,
  //   todo: "吃",
  //   isCompleted: false,
  // },
  // {
  //   id: 2,
  //   todo: "看世界杯",
  //   isCompleted: true,
  // },
]);
let addTodo = (input) => {
  if (!input.value) {
    return;
  }
  let obj = {
    id: Math.random().toString(32).substring(2),
    todo: input.value,
    isCompleted: false,
  };
  data.value.push(obj);
  input.value = "";
};
let delTodo = (input) => {
  data.value.splice(input, 1);
};
//接收筛选的字段
let filterFlag = ref("all");
let handleGetFlag = (flag) => {
  console.log(flag);
  filterFlag.value = flag;
};
//全部数量
let allCount = ref(0);
//已完成数量
let completedCount = ref(0);
//未完成数量
let activeCount = ref(0);

let newData = computed(() => {
  //全部数据
  let all = data.value;
  //已完成数据
  let completed = data.value.filter((item) => item.isCompleted);
  //未完成数据
  let active = data.value.filter((item) => !item.isCompleted);
  allCount.value = all.length;
  completedCount.value = completed.length;
  activeCount.value = active.length;
  switch (filterFlag.value) {
    case "all":
      return all;
    case "completed":
      return completed;
    case "active":
      return active;
  }
});
</script>
<style scoped></style>
